<template>
  <px-dialog v-model="visible" title="报警说明" destroy-on-close>
    <div v-if="content" class="w-e-text-container" v-html="content" />
    <px-empty v-else description="暂无报警说明" />

    <template #footer>
      <span class="dialog-footer">
        <px-button type="primary" @click="handleClose">关闭</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script lang="ts" setup>
import { ref, computed, watchEffect } from "vue";

import { getAlarmDescription } from "@/api/alarm";

import { PropsTypeForDetail, EmitsTypeForDetail } from "../type";

const props = defineProps<PropsTypeForDetail>();
const emits = defineEmits<EmitsTypeForDetail>();

const content = ref("");

const visible = computed({
  get: () => props.modelValue,
  set: (val: boolean) => emits("update:modelValue", val)
});

const handleClose = () => {
  visible.value = false;
};

const getAlarmDescriptionInfo = async () => {
  const res = await getAlarmDescription({ className: props.className });
  if (res.content) {
    content.value = res.content;
  }
};

watchEffect(() => {
  if (props.className && visible.value) {
    getAlarmDescriptionInfo();
  }
});
</script>

<style lang="scss" scoped>
@import url("@wangeditor/editor/dist/css/style.css");

/* ul ol 样式 */
:deep(ol) {
  margin: 10px 0 10px 22px;
  list-style-type: decimal;
}

:deep(ul) {
  margin: 10px 0 10px 22px;
  list-style-type: disc;
}

/* table 样式 */
:deep(table) {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;

  td,
  th {
    min-width: 50px;
    height: 32px;
    padding: 3px 5px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  th {
    text-align: center;
    background-color: #f1f1f1;
    border-bottom: 2px solid #ccc;
  }
}

/* blockquote 样式 */
:deep(blockquote) {
  display: block;
  min-height: 24px;
  padding: 5px 10px;
  margin: 10px 0;
  font-size: 100%;
  line-height: 1.4;
  background-color: #f1f1f1;
  border-left: 8px solid #d0e5f2;
}

/* code 样式 */
:deep(code) {
  display: inline-block;
  *display: inline;
  padding: 3px 5px;
  margin: 0 3px;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
}

:deep(pre) code {
  display: block;
}

:deep(a) {
  // text-decoration: underline;
  color: #5592e5;
}

/*
  *  以下样式由于全局reset文件被覆盖，所以需要重新定义
  */
:deep(h5),
.h5 {
  font-size: 14px;
}

:deep(h4),
.h4 {
  font-size: 16px;
  font-weight: bold;
}

:deep(h3),
.h3 {
  font-size: 18px;
  font-weight: bold;
}

:deep(h2),
.h2 {
  font-size: 20px;
  font-weight: bold;
}

:deep(h1),
.h1 {
  font-size: 22px;
  font-weight: bold;
}

:deep(i) {
  font-style: italic;
}
</style>
